<template>
  <a-config-provider :locale="locale">
    <router-view v-slot="{ Component }">
      <keep-alive :include="keepAliveRoutes">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </a-config-provider>
</template>
<script>
import { mapActions } from "vuex";
import "moment/locale/zh-cn";
import request from "./common/utils/request";
import { notification, Button } from "ant-design-vue";
import {computed, h, reactive, ref, toRefs, watch} from "vue";
import utils from "./common/utils/utils";
import store from "./store";
import routes from "@/router/router.config";
let version = "";

export default {
  name: "App",
  computed: {
    locale() {
      return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale;
    },
  },
  beforeCreate() {
    let navLanguage = (navigator.language || 'zh-CN').replace(/-/g, "_");
    let navLanguageMain = navLanguage.split("_");
    if (navLanguageMain?.length && navLanguageMain[0] == 'en') {
      navLanguage = navLanguageMain[0];
    }
    let language = utils.getStorage("lang") || navLanguage;
    utils.setStorage('lang', language);
  },
  created() {
    // 检测是否时手机环境
    // this.setMobile();
    window.onresize = () => {
      // this.setMobile();
      store.dispatch("SetResizeChange");
    };
  },
  methods: {
    ...mapActions(["SetAppViewHeight"]),
    /**
     * @description: 存储当前设备是否为手机端
     */
    setMobile() {
      const isMobile = this.$utils.isMobile();
      if (isMobile != this.$store.getters.isMobile) {
        this.$store.dispatch("setIsMobile", isMobile);
      }
    },
  },
  setup() {
    const villageType = computed(() => store.getters.buildingInfo.villageType);
    const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
    const state = reactive({
      keepAliveRoutes: [],
    });

    const HOUSING_STATUS_DEFAULT = [
      // 空置${limit}天以上
      { color: "#a9dcfd", title: "空置中", isCustom: 0, type: "vacant", limit: 0 },
      {
        color: "#1890ff",
        title: "招商中",
        isCustom: 0,
        type: "investment",
        limit: 0,
      },
      // 锁定${limit}天以上
      { color: "#ce9ced", title: "已锁定", isCustom: 0, type: "lock", limit: 0 },
      // 出租${limit}天以上
      { color: "#c6e0a7", title: "已出租", isCustom: 0, type: "rent", limit: 0 },
      // ${limit}天以内到期
      {
        color: "#FFA940",
        title: "拖欠经营",
        isCustom: 0,
        type: "overdue",
        limit: 0,
      },
      {
        color: "#fecb85",
        title: "90日内到期",
        isCustom: 0,
        type: "expire",
        limit: 90,
      },
      {
        color: "#fdac93",
        title: "30日内到期",
        isCustom: 0,
        type: "expire",
        limit: 30,
      },
      { color: "#ff7875", title: "已到期", isCustom: 0, type: "expired", limit: 0 },
    ];

    watch(
      () => villageType.value,
      (val) => {
        if (val === "village") {
          let defaultVillageStatus = HOUSING_STATUS_DEFAULT.map((v) => {
            if (v.type === "rent") {
              v.title = "已入住";
            }
            return v;
          });
          store.dispatch("SetHousingStatus", defaultVillageStatus);
        } else {
          store.dispatch("SetHousingStatus", HOUSING_STATUS_DEFAULT);
        }
      },
      { deep: true, immediate: true }
    );

    const init = () => {
      utils.getKeepAliveRoutes(routes, state.keepAliveRoutes);
    };
    init();
    return {
      ...toRefs(state),
    };
  }
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}
html,
body,
#app {
  height: 100%;
  background: #f0f2f5;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout.layout-basic {
  height: 100%;
  min-height: 100%;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

// 数据列表 样式
.table-alert {
  margin-bottom: 16px;
}
// 数据列表 操作
.table-operator {
  margin-bottom: 18px;

  button {
    margin-right: 8px;
  }
}
// 数据列表 搜索条件
.table-page-search-wrapper {
  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-bottom: 24px;
      margin-right: 0;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      > .ant-form-item-label {
        line-height: 32px;
        padding-right: 8px;
        width: auto;
      }
      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .ant-table-body {
    &::-webkit-scrollbar {
      height: 8px !important;
      max-width: 8px !important;
    }
    &::-webkit-scrollbar-track {
      background: #f6f7fb;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #f5f5f5;
      cursor: pointer;
      border-radius: 5px;
    }
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

@media (max-width: 800px) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;
        > span {
          display: block;
        }
      }
    }
  }
}

.update-notification {
  .title {
    font-weight: bold;
    padding: 8px 0;
    font-size: 14px;
  }
  .opt {
    text-align: right;
  }

  .version {
    color: @success-color;
    margin-left: 4px;
  }
  .content {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: inherit;
  }
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 10px;
  background-color: #C1C1C1;
  background-clip: padding-box;
  transition: color 0.2s ease;
  border: 4px solid transparent; /* 滚动条边框 */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #7D7D7D;
}
</style>
